import React from 'react';
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom';
import './index.scss';
import Img from '../LazyLoadImg';
import CircleRating from '../CircleRating';
import Genres from '../Genres';
import PosterFallback from '../../assets/no-poster.png';
import { useAppSelector } from '../../store/hook';

const MovieCard = ({ data, fromSearch, mediaType }: any) => {
  const { url } = useAppSelector(state => state.home);
  const navigate = useNavigate();
  const posterUrl = data.poster_path ? url.poster + data.poster_path : PosterFallback;
  return (
    <div
      className="movieCard"
      onClick={() => navigate(`/${data.media_type || mediaType}/${data.id}`)}
    >
      <div className="posterBlock">
        <Img className="posterImg" src={posterUrl} />
        {!fromSearch && (
          <React.Fragment>
            <CircleRating rating={data.vote_average.toFixed(1)} />
            <Genres data={data.genre_ids.slice(0, 2)} />
          </React.Fragment>
        )}
      </div>
      <div className="textBlock">
        <span className="title">{data.title || data.name}</span>
        <span className="date">{data.release_date}</span>
      </div>
    </div>
  );
};

export default MovieCard;
